<template>
    <view class="falce-canvas">
        <camera
            flash="off"
            device-position="front"
            @initdone="initdone"
            @error="error"
            class="canvas-camera"
            v-show="!faceFile"
        >
        </camera>
        <u-image
            :width="610"
            :height="610"
            class="canvas-bg"
            src="@/static/images/face.png"
        ></u-image>
        <u-image
            width="300px"
            height="300px"
            class="canvas-file"
            :src="faceFile"
            v-show="faceFile"
        ></u-image>
    </view>
</template>
<script>
export default {
    data() {
        return {
            width: 500,
            height: 500,
            faceFile: null,
        }
    },
    methods: {
        // 拍照
        takePhoto() {
            const ctx = uni.createCameraContext()
            return new Promise((resolve) => {
                ctx.takePhoto({
                    quality: 'high',
                    success: (res) => {
                        this.faceFile = res.tempImagePath
                        resolve(res.tempImagePath)
                    },
                })
            })
        },
        // 重拍
        resetPhoto() {
            this.faceFile = null
        },
        error() {
            this.$emit('error')
        },
        initdone() {
            this.$emit('success')
        },
        addUnit(value = 0, unit = 'px') {
            return this.$u.test.number(value) ? `${value}${unit}` : value
        },
    },
}
</script>
<style lang="scss" scoped>
.falce-canvas {
    position: relative;
    width: 610rpx;
    height: 610rpx;
    overflow: hidden;
    .canvas-camera {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%);
    }
    .canvas-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .canvas-file {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
